<template>
 <div class="statistics">
   <div class="header">
     <div>
       <div class="header-title">报修数</div>
       <div class="header-num">326</div>
       <div id="header1" class="mimiTable"></div>
       <div class="bottom-title">今日报修 120</div>
     </div>
     <div>
       <div class="header-title">维修数</div>
       <div class="header-num">230</div>
       <div id="header2" class="mimiTable"></div>
       <div class="bottom-title">今日维修 50</div>
     </div>
     <div>
       <div class="header-title">今日完成进度</div>
       <div class="header-num">70%</div>
       <div id="header3" class="mimiTable"></div>
       <div class="bottom-title"></div>
     </div>
   </div>
   <div class="body">
     <div >
       <div class="body-title">报修类型占比</div>
       <div id="body1"></div>
     </div>
     <div>
       <div class="body-title">维修员排名</div>
       <div id="body2"></div>
     </div>
   </div>
 </div>
</template>

<script>

import { Area } from '@antv/g2plot';
import { Column } from '@antv/g2plot';
import { Gauge } from '@antv/g2plot';
import { Pie } from '@antv/g2plot';
import { Bar } from '@antv/g2plot';





export default {
  name: 'Statistics',
  mounted() {
    this.loadingArea()
    this.logincolumnMini()
    this.loginGauge()
    this.loginPie()
    this.loginBar()

  },
  methods:{
    loadingArea(){
      fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
          .then((res) => res.json())
          .then((data) => {
            const area = new Area('header1', {
              data,
              xField: 'Date',
              yField: 'scales',
              smooth:true,
              tickLine:null,
              subTickLine:null,
              xAxis: false,
              yAxis:false,
            });
            area.update({ "theme": { "styleSheet": { "brandColor": "#025DF4", "paletteQualitative10": ["#025DF4", "#DB6BCF", "#2498D1", "#BBBDE6", "#4045B2", "#21A97A", "#FF745A", "#007E99", "#FFA8A8", "#2391FF"], "paletteQualitative20": ["#025DF4", "#DB6BCF", "#2498D1", "#BBBDE6", "#4045B2", "#21A97A", "#FF745A", "#007E99", "#FFA8A8", "#2391FF", "#FFC328", "#A0DC2C", "#946DFF", "#626681", "#EB4185", "#CD8150", "#36BCCB", "#327039", "#803488", "#83BC99"] } } });
            area.render();
          });
    },
    logincolumnMini(){
      const data = [
        {
          type: '11月25日',
          '维修数': 38,
        },
        {
          type: '11月26日',
          '维修数': 52,
        },
        {
          type: '11月27日',
          '维修数': 61,
        },
        {
          type: '11月28日',
          '维修数': 145,
        },
        {
          type: '11月29日',
          '维修数': 48,
        },
        {
          type: '11月30日',
          '维修数': 38,
        },
        {
          type: '12月1日',
          '维修数': 38,
        },
        {
          type: '12月2日',
          '维修数': 38,
        },
      ];

      const columnPlot = new Column('header2', {
        data,
        xField: 'type',
        yField: '维修数',
        label: null,
        xAxis: false,
        yAxis:false
      });

      columnPlot.update({ "theme": { "styleSheet": { "brandColor": "#025DF4", "paletteQualitative10": ["#025DF4", "#DB6BCF", "#2498D1", "#BBBDE6", "#4045B2", "#21A97A", "#FF745A", "#007E99", "#FFA8A8", "#2391FF"], "paletteQualitative20": ["#025DF4", "#DB6BCF", "#2498D1", "#BBBDE6", "#4045B2", "#21A97A", "#FF745A", "#007E99", "#FFA8A8", "#2391FF", "#FFC328", "#A0DC2C", "#946DFF", "#626681", "#EB4185", "#CD8150", "#36BCCB", "#327039", "#803488", "#83BC99"] } } });      columnPlot.render();
    },
    loginGauge(){
      const gauge = new Gauge('header3', {
        percent: 0.75,
        range: {
          color: 'l(0) 0:#fab120 1:#3bc27f',
        },
        startAngle: Math.PI,
        endAngle: 2 * Math.PI,
        indicator: null,
        statistic: {
          title: {
            offsetY: -36,
            style: {
              fontSize: '36px',
              color: '#4B535E',
            },
            formatter: () => '70%',
          },
          content: {
            style: {
              fontSize: '24px',
              lineHeight: '44px',
              color: '#4B535E',
            },
            formatter: () => '完成进度',
          },
        },
      });

      gauge.render();


    },
    loginPie(){
      const data = [
        { type: '五金', value: 27 },
        { type: '木', value: 25 },
        { type: '水', value: 18 },
        { type: '电', value: 15 },
        { type: '土', value: 10 },
        { type: '其他', value: 5 },
      ];

      const piePlot = new Pie('body1', {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.64,
        meta: {
          value: {
            formatter: (v) => `${v}`,
          },
        },
        label: {
          type: 'inner',
          offset: '-50%',
          autoRotate: false,
          style: { textAlign: 'center' },
          formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
        },
        statistic: {
          title: {
            offsetY: -8,
          },
          content: {
            offsetY: -4,
          },
        },
        // 添加 中心统计文本 交互
        interactions: [
          { type: 'element-selected' },
          { type: 'element-active' },
          {
            type: 'pie-statistic-active',
            cfg: {
              start: [
                { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
                { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
              ],
              end: [
                { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
                { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
              ],
            },
          },
        ],
      });

      piePlot.update({ "theme": { "styleSheet": { "brandColor": "#5B8FF9", "paletteQualitative10": ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16", "#6F5EF9", "#78D3F8", "#9661BC", "#F6903D", "#008685", "#F08BB4"], "paletteQualitative20": ["#5B8FF9", "#CDDDFD", "#61DDAA", "#CDF3E4", "#65789B", "#CED4DE", "#F6BD16", "#FCEBB9", "#6F5EF9", "#D3CEFD", "#78D3F8", "#D3EEF9", "#9661BC", "#DECFEA", "#F6903D", "#FFE0C7", "#008685", "#BBDEDE", "#F08BB4", "#FFE0ED"] } } });
      piePlot.render();

    },
    loginBar(){
      const data = [
        {
          year: '11月24日',
          value: 3,
          type: '张磊',
        },
        {
          year: '11月25日',
          value: 4,
          type: '张磊',
        },
        {
          year: '11月26日',
          value: 3.5,
          type: '张磊',
        },
        {
          year: '11月27日',
          value: 5,
          type: '张磊',
        },
        {
          year: '11月28日',
          value: 4.9,
          type: '张磊',
        },
        {
          year: '11月29日',
          value: 6,
          type: '张磊',
        },
        {
          year: '11月30日',
          value: 7,
          type: '张磊',
        },
        {
          year: '12月1日',
          value: 9,
          type: '张磊',
        },
        {
          year: '12月2日',
          value: 13,
          type: '张磊',
        },

        {
          year: '11月24日',
          value: 2,
          type: '王伟',
        },
        {
          year: '11月25日',
          value: 5,
          type: '王伟',
        },
        {
          year: '11月26日',
          value: 2.5,
          type: '王伟',
        },
        {
          year: '11月27日',
          value: 4.3,
          type: '王伟',
        },
        {
          year: '11月28日',
          value: 2.1,
          type: '王伟',
        },
        {
          year: '11月29日',
          value: 4.5,
          type: '王伟',
        },
        {
          year: '11月30日',
          value: 9.6,
          type: '王伟',
        },
        {
          year: '12月1日',
          value: 5.8,
          type: '王伟',
        },
        {
          year: '12月2日',
          value: 10.3,
          type: '王伟',
        },

        {
          year: '11月24日',
          value: 2.8,
          type: '刘铭',
        },
        {
          year: '11月25日',
          value: 7,
          type: '刘铭',
        },
        {
          year: '11月26日',
          value: 2.8,
          type: '刘铭',
        },
        {
          year: '11月27日',
          value: 2.8,
          type: '刘铭',
        },
        {
          year: '11月28日',
          value: 2.8,
          type: '刘铭',
        },
        {
          year: '11月29日',
          value: 6,
          type: '刘铭',
        },
        {
          year: '11月30日',
          value: 7,
          type: '刘铭',
        },
        {
          year: '12月1日',
          value: 8,
          type: '刘铭',
        },
        {
          year: '12月2日',
          value: 10,
          type: '刘铭',
        },
      ];

      const stackedBarPlot = new Bar('body2', {
        data: data.reverse(),
        isStack: true,
        xField: 'value',
        yField: 'year',
        seriesField: 'type',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'left', 'middle', 'right'
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: 'interval-adjust-position' },
            // 数据标签防遮挡
            { type: 'interval-hide-overlap' },
            // 数据标签文颜色自动调整
            { type: 'adjust-color' },
          ],
        },
      });

      stackedBarPlot.update({ "theme": { "styleSheet": { "brandColor": "#5B8FF9", "paletteQualitative10": ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16", "#6F5EF9", "#78D3F8", "#9661BC", "#F6903D", "#008685", "#F08BB4"], "paletteQualitative20": ["#5B8FF9", "#CDDDFD", "#61DDAA", "#CDF3E4", "#65789B", "#CED4DE", "#F6BD16", "#FCEBB9", "#6F5EF9", "#D3CEFD", "#78D3F8", "#D3EEF9", "#9661BC", "#DECFEA", "#F6903D", "#FFE0C7", "#008685", "#BBDEDE", "#F08BB4", "#FFE0ED"] } } });
      stackedBarPlot.render();
    }
  }
}

</script>

<style scoped>
.statistics{
  margin-top: 20px;
  width: 100%;
}
.statistics .header{
  display: flex;
  justify-content: space-around;
}
.statistics .header>div{
  width: 32%;
  background-color: #FFF;
  border-radius: 10px;
  padding: 20px;

}
.statistics .header .header-num{
  font-weight: bold;
  font-size: 30px;
}

.header .mimiTable{
  width: 100%;
  height: 100px;
  margin: 10px 0;
}
.statistics .header .bottom-title{
  color: rgba(0,0,0,.65);
  font-size: 14px;
}
.statistics .body{
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.statistics .body>div{
  width: 49%;
  padding: 20px;
  background-color: #FFFFFF;
  border-radius: 10px;
}
.statistics .body .body-title{
  font-size: 24px;
}
</style>
